<template>
	<view class="page">
		<!-- 预览图片 -->
		<swiper class="swiper" style="width:100%;height:calc(100vh - 44px);margin:0 auto;" v-if="fileType === '1'">
			<swiper-item v-for="(item,index) in imageList" :key="'key'+index">
				<image :src="item" style="width:100%;height:100%;" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
		<!-- 预览文件 -->
		<web-view :webview-styles="webviewStyles" :src="src" v-if="fileType === '2'"></web-view>
		<!-- 预览视频 -->
		<view class="video-detail-page" v-if="fileType === '3'" @touchmove.prevent>
			<view class="video-box flex-column" style="height: 100%;">
				<video :src="fileUrl" controls autoplay="autoPlay" class="full-screen-video" style="object-fit: cover;"></video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ss-preview',
		props: {
			fileUrl: {
				type: String,
				default: ''
			},
			fileType: {
				type: String,
				default: '', //1.预览图片，2.预览文件，3.预览视频
			},
			imageList:{//预览图片，可以预览多张
				type: Array,
				default:()=>{
					return []
				}
			},
			autoPlay:true
		},
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				src: '',
			};
		},

		methods: {
			//APP，H5预览文档图片和视频，微信小程序预览图片和视频
			previewPdf(value) {
				console.log(value);
				this.src = `/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`;	
				console.log(this.src,'src------');
				//此处路径为项目根路径，如果是uni-modules处于src下方，则地址应该为下方地址，否则会读取失败
				// this.src = `/src/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`;	
			},
		},
		watch: {
			fileType: {
				deep: true,
				immediate: true,
				handler: function(value) {
					if(value === '2'){//预览文档
						//#ifdef APP-PLUS || H5
						this.previewPdf(this.fileUrl)
						//#endif
					}
				}
			}
		}
	};
</script>
<style lang="scss" scoped>

	.page {
		height: 100%;

		.video-detail-page {
			width: 100%;
			height: 100%;

			.video-box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				flex: 1;
				
				video {
					width: 100%;
					height: 100%;
					object-fit: cover; /* 保持视频宽高比并填充容器 */
				}
			}
		}
	}

	.video-detail-page {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	// z-index: 999; // 确保全屏时位于最上层
}

.full-screen-video {
	width: 100%;
	height: 100%;
	object-fit: fill; // 默认填充方式，根据需求调整
}

// 可能需要根据屏幕方向调整object-fit属性
@media (orientation: portrait) {
	.full-screen-video {
		object-fit: fill-width; // 竖屏时按宽度填充
	}
}

@media (orientation: landscape) {
	.full-screen-video {
		object-fit: fill-height; // 横屏时按高度填充
	}
}


</style>
